<template>
	<div class="decorate-classify"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <section :class="['classify-box','layout'+tplItemData.layout,'category'+tplItemData.category]">
      <div :class="['classify-wrap',isHieghtAuto?'':'classify-height'+tplItemData.category]">
        <ul ref="classifyWrap">
          <li class="classify-slide" v-for="(item,index) in tplItemData.dataset" :key="index">
            <a href="javascript:;" @click="openLink(item.link)"
              :style="{'background-color':tplItemData.category==0?item.bgColor:'transparent','color':tplItemData.category==0?item.fotColor:'#3D3D3D'}">
            {{item.showtitle}}
            </a>
          </li>
        </ul>
      </div>
      <div class="toggle" v-if="tplItemData.layout==0 && isShow">
        <div class="toggle-title" style="background-color:#28C192;color:#fff;" @click="unfold">{{infotext}}</div>
      </div>
      <div class="toggle" v-if="tplItemData.layout==1 && isShow">
        <div class="toggle-title" style="color:#1CA7F4;" @click="unfold">{{infotext}}</div>
      </div>
    </section>
  </div>
</template>

<script>
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        isHieghtAuto: false,
        isShow: false,
        infotext: '展开'
      }
    },
    mounted() {
      // // console.log(this.tplItemData)
      const topH = this.$refs.classifyWrap.offsetHeight
      // // console.log(topH)
      if (this.tplItemData.category == 0 && topH > 72) {
        this.isShow = true
      }
      if (this.tplItemData.category == 1 && topH > 64) {
        this.isShow = true
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      },
      unfold() {
        this.isHieghtAuto = !this.isHieghtAuto
        if (this.isHieghtAuto) {
          this.infotext = '收起'
        } else {
          this.infotext = '展开'
        }
      }
    }
  
  })
</script>

<style lang="scss">
.classify-box{
  .classify-wrap{
    overflow: hidden;
    &.classify-height0{
      max-height: 144px;
    }
    &.classify-height1{
      max-height: 128px;
    }
    &.HieghtAuto{
      height: auto;
    }
    ul{
      
      display: flex;
      flex-wrap: wrap;
      transition: .2s all;
      .classify-slide{
        a{
          display: block;
          font-size: 28px;
        }
      }
    }
  }
  &.layout0{
    a{
      border-radius: 40px;
      padding: 16px 28px;
      color: #3D3D3D;
    }
    &.category0{
      .classify-slide{
        padding: 0 8px;
        margin: 4px 0;
      }
    }  
  }
  &.layout1{
    a{
      display: block;
      padding: 16px 28px;
      color: #3D3D3D;
      text-align: center;
    }  
    .classify-slide{
      width: calc(100% / 3);
      box-sizing: border-box;
    }
    &.category0{
      .classify-slide{
        padding: 0 8px;
        margin: 4px 0;
      }
    }
    &.category1{
      a{
        color: #3D3D3D!important;
      }
    }
  }
  .toggle{
    .toggle-title{
      border-radius: 18px;
      text-align: center;
      padding: 10px;
      width: 70px;
      height: 30px;
      margin-left: calc(100% - 90px);
      margin-top: 20px;
    }
  }
}

</style>
